<template>
	<div>
		<div class="nav-bar">
			<van-nav-bar title="JSPANG-MALL"
									 :fixed="true"
									 @click-right="onClickRight"
									 z-index="99">
				<template #right>
					<van-icon name="search" />
				</template>
			</van-nav-bar>
		</div>
		<div class="swiper">
			<van-swipe :autoplay="3000"
								 indicator-color="#E61382">
				<van-swipe-item v-for="banner in bannerPicArray"
												:key="banner.goodsId"
												:height="100">
					<img v-lazy="banner.image"
							 width="100%"
							 :lazy-render="true" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<div class="category-bar">
			<div v-for="(cate, index) in category"
					 :key="index">
				<img :src="cate.image"
						 width="90%">
				<span>{{ cate.mallCategoryName }}</span>
			</div>
		</div>
		<div class="advertise-banner">
			<img :src="adBanner"
					 width="100%">
		</div>
		<div class="recommend-area">
			<div class="recommend-title">商品推荐</div>
			<div class="recommend-body">
				<swiper :options="swiperOption">
					<swiper-slide v-for="(item, index) in recommendGoods"
												:key="index">
						<div class="recommend-item">
							<img :src="item.image"
									 width="80%">
						</div>
						<div>{{ item.goodsName }}</div>
						<div>￥{{ item.price | moneyFilter }}（￥{{ item.mallPrice | moneyFilter }}）</div>
					</swiper-slide>
					<!-- <div class="swiper-pagination"
							 slot="pagination"></div> -->
					<!-- <div class="swiper-button-prev"
							 slot="button-prev"></div>
					<div class="swiper-button-next"
							 slot="button-next"></div> -->
				</swiper>
			</div>
		</div>
		<div class="floor">
			<floor :floorData="floor1"
						 :floorTitle="floorName.floor1"></floor>
			<floor :floorData="floor2"
						 :floorTitle="floorName.floor2"></floor>
			<floor :floorData="floor3"
						 :floorTitle="floorName.floor3"></floor>
		</div>
		<div class="hot-goods">
			<div class="good-title">热卖商品</div>
			<div class="good-list">
				<van-list>
					<van-row gutter="20">
						<van-col span="12"
										 v-for="(item, index) in hotGoods"
										 :key="index">
							<good-info :goodImage="item.image"
												 :goodName="item.name"
												 :goodPrice="item.price"></good-info>
						</van-col>
					</van-row>
				</van-list>
			</div>
		</div>
	</div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import Floor from '@/components/content/Home/Floor'
import GoodInfo from '@/components/common/GoodInfo'

import { toMoney } from '@/filter'

export default {
	name: 'Home',
	data() {
		return {
			bannerPicArray: [],
			category: [],
			adBanner: '',
			recommendGoods: [],
			floor1: [],
			floor2: [],
			floor3: [],
			floorName: {},
			swiperOption: {
				loop: true,
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false
				},
				slidesPerView: 3
			},
			hotGoods: []
		}
	},
	components: {
		swiper,
		swiperSlide,
		Floor,
		GoodInfo
	},
	methods: {
		onClickRight() {
			console.log('clicked')
		}
	},
	created() {
		this.$axios({
			url: '/jspang/home',
			method: 'get'
		})
			.then(response => {
				if (response.status === 200) {
					const data = response.data.data
					this.category = data.category
					this.adBanner = data.advertesPicture.PICTURE_ADDRESS
					this.bannerPicArray = data.slides
					this.recommendGoods = data.recommend
					this.floor1 = data.floor1
					this.floor2 = data.floor2
					this.floor3 = data.floor3
					this.floorName = data.floorName
					this.hotGoods = data.hotGoods
				}
			})
			.catch(error => console.log(error))
	},
	filters: {
		moneyFilter(money) {
			return toMoney(money)
		}
	}
}
</script>

<style lang="scss" scoped>
.nav-bar {
	::v-deep .van-nav-bar__content {
		background-color: #e61382;
		height: 2.2rem;
		line-height: 2.2rem;

		.van-nav-bar__title {
			color: #fff;
			font-size: 1.1rem;
		}

		.van-icon {
			color: #fff;
			font-size: 1.1rem;
			font-weight: bold;
		}
	}
}

.swiper {
	margin-top: 2.2rem;
}

.category-bar {
	background-color: #fff;
	margin: 0 0.3rem 0.3rem;
	border-radius: 0.3rem;
	font-size: 0.8rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;

	div {
		padding: 0.1rem 0.3rem 0.3rem;
		text-align: center;
		font-size: 0.8rem;
	}

	img {
		width: 3.2rem;
	}
}

.recommend-area {
	background-color: #fff;
	margin-top: 0.3rem;

	.recommend-title {
		border-bottom: 1px solid #eee;
		font-size: 1rem;
		color: #e61382;
		padding: 0.2rem;
	}

	.recommend-body {
		border-bottom: 1px solid #eee;
		font-size: 0.4rem;

		.recommend-item {
			width: 99%;
			border-right: 1px solid #eee;
			text-align: center;
		}
	}
}

.hot-goods {
	text-align: center;
	font-size: 1rem;
	height: 1.8rem;
	line-height: 1.8rem;

	.good-title {
		color: #e61382;
	}

	.good-list {
		height: 130rem;
		overflow: hidden;
		background-color: #fff;
	}
}
</style>
